<template>
	<view class="p-[16px]">
		<u-form error-type="toast" ref="formRef" :model="formData" :rules="rules">
			<u-form-item prop="userName">
				<u-input v-model="formData.userName" prefix-icon="/static/phone.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="tel" placeholder="请输入手机号" border="none"></u-input>
			</u-form-item>
			<u-form-item prop="verifyCode">
				<u-input v-model="formData.verifyCode" prefix-icon="/static/verifycode.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="number" placeholder="请输入验证码" border="none"></u-input>
				<template #right>
					<text @click="getCode" class="text-[#d81e06]">{{tips}}</text>
				</template>
			</u-form-item>
			<u-form-item prop="password">
				<u-input v-model="formData.password" prefix-icon="/static/password.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="password" placeholder="请输入密码" border="none"></u-input>
			</u-form-item>
			<u-form-item prop="password2">
				<u-input v-model="formData.password2" prefix-icon="/static/password.svg" :prefixIconStyle="{fontSize:'24px',color:'#d81e06'}" clearable type="password" placeholder="请确认密码" border="none"></u-input>
			</u-form-item>
		</u-form>
		<u-gap height="40"></u-gap>
		<u-button @click="getPwd" color="#d81e06" size="large" shape="circle" text="提交"></u-button>
	</view>
	<u-code :seconds="60" ref="uCodes" @change="codeChange"></u-code>
</template>

<script setup>
	import {ref, unref} from "vue";
	import * as api from "@/api.js";
	
	const tips = ref('');
	const uCodes = ref();
	
	const formRef = ref();
	const formData = ref({
		userName:'',//手机号
		verifyCode: '',//验证码
		password:'',//密码
		password2: '',//再次确认密码
	})
	
	const rules = {
		userName:[
			{
				required: true,
				message: '请填写手机号',
				trigger: ['blur']
			},
			{
				validator:(rule, value, callback) => {
					return uni.$u.test.mobile(value)
				},
				message: '手机号格式不对',
				trigger: ['blur']
			}
		],
		verifyCode:[
			{
				required: true,
				message: '请输入验证码',
				trigger: ['blur']
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.number(value) && value.length == 6
				}
			}
		],
		password:[
			{
				required: true,
				message: '请输入密码',
				trigger: ['blur'],
			},
			{
				min:6,
				max:12,
				message: '长度在6-12个字符之间'
			},
			{
				validator: (rule, value, callback) => {
					return value.split(' ').length == 1;
				},
				message: '密码不能包含空格',
				trigger: ['blur'],
			}
		],
		password2:[
			{
				required: true,
				message: '请确认密码',
				trigger: ['blur'],
			},
			{
				validator: (rule, value, callback) => {
					return value === formData.value.password;
				},
				message: '两次密码不一致',
				trigger: ['blur'],
			}
		]
	}
	
	const codeChange = e => {
		tips.value = e
	}
	
	const getCode = async () => {
		if (uCodes.value.canGetCode) {
			// 模拟向后端请求验证码
			if(!uni.$u.test.mobile(unref(formData).userName)) {
				uni.showToast({
					icon:'none',
					title:'请填写正确的电话号码'
				})
				return
			}
			uni.showLoading({
				title: '正在获取验证码'
			})
			const result = await api.sendSms(unref(formData).userName,3);
			uni.hideLoading();
			if(result[1]) {
				await nextTick();
				uni.showToast({
					icon:'none',
					title:result[1]
				})
			} else {
				uCodes.value.start();
			}
		}
	}
	
	const getPwd = () => {
		formRef.value.validate().then(async res => {
			uni.showLoading();
			const result = await api.findPwd(unref(formData));
			uni.hideLoading();
			await nextTick();
			if(result[1]) {
				uni.showToast({
					icon:'none',
					title:result[1]
				})
			} else {
				uni.showToast({
					icon:'success',
					title:'注册成功'
				})
				await new Promise(resolve => setTimeout(() => resolve(),800));
				uni.navigateBack();
			}
		}).catch(err => console.log(err))
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
